<!--<template>-->
<!--  <div>-->
<!--    <div class="card" style="margin-bottom: 5px">您好！{{ data.user?.name }}，欢迎使用本系统！</div>-->
<!--    <div style="display: flex">-->
<!--      <div class="card" style="flex: 50%; height: 350px">-->
<!--        <div style="font-weight: bold; font-size: 18px; padding: 10px 0 30px 10px">系统公告</div>-->
<!--        <el-timeline style="max-width: 600px">-->
<!--          <el-timeline-item-->
<!--              v-for="(item, index) in data.noticeData"-->
<!--              :key="index"-->
<!--              :timestamp="item.time"-->
<!--          >-->
<!--            {{ item.content }}-->
<!--          </el-timeline-item>-->
<!--        </el-timeline>-->
<!--      </div>-->
<!--      <div style="flex: 50%"></div>-->
<!--    </div>-->
<!--  </div>-->
<!--</template>-->

<!--<script setup>-->

<!--import {reactive} from "vue";-->
<!--import request from "@/utils/request.js";-->
<!--import {ElMessage} from "element-plus";-->

<!--const data = reactive({-->
<!--  user: JSON.parse(localStorage.getItem('xm-user') || '{}'),-->
<!--  noticeData: []-->
<!--})-->

<!--const loadNotice = () => {-->
<!--  request.get('/notice/selectAll').then(res => {-->
<!--    if (res.code === '200') {-->
<!--      data.noticeData = res.data-->
<!--    } else {-->
<!--      ElMessage.error(res.msg)-->
<!--    }-->
<!--  })-->
<!--}-->
<!--loadNotice()-->
<!--</script>-->
<!--<template>-->
<!--  <div>-->
<!--    <div class="card" style="margin-bottom: 5px">您好！{{ data.user?.name }}，欢迎使用本系统！</div>-->
<!--    <div style="display: flex">-->
<!--      <div class="card" style="flex: 100%">-->
<!--        <div style="font-weight: bold; font-size: 18px; padding: 10px 0 30px 10px">系统公告</div>-->
<!--        <el-timeline>-->
<!--          <el-timeline-item-->
<!--              v-for="(item, index) in data.noticeData"-->
<!--              :key="index"-->
<!--              :timestamp="item.time"-->
<!--          >-->
<!--            <div class="notice-content">{{ item.content }}</div>-->
<!--            &lt;!&ndash; 如果存在附件，则显示下载链接 &ndash;&gt;-->
<!--            <div v-if="item.attachment">-->
<!--              <el-button type="text" @click="downloadAttachment(item.attachment)">下载附件</el-button>-->
<!--            </div>-->
<!--          </el-timeline-item>-->
<!--        </el-timeline>-->
<!--      </div>-->
<!--    </div>-->
<!--  </div>-->
<!--</template>-->

<!--<script setup>-->
<!--import { reactive } from "vue";-->
<!--import request from "@/utils/request.js";-->
<!--import { ElMessage } from "element-plus";-->

<!--const data = reactive({-->
<!--  user: JSON.parse(localStorage.getItem('xm-user') || '{}'),-->
<!--  noticeData: []-->
<!--})-->

<!--// 加载公告数据-->
<!--const loadNotice = () => {-->
<!--  request.get('/notice/selectAll').then(res => {-->
<!--    if (res.code === '200') {-->
<!--      data.noticeData = res.data.map(item => ({-->
<!--        ...item,-->
<!--        // 假设返回的公告数据中已经有附件字段，如果没有，您可以在这里处理-->
<!--        attachment: item.attachment || null  // 确保有附件字段-->
<!--      }));-->
<!--    } else {-->
<!--      ElMessage.error(res.msg);-->
<!--    }-->
<!--  });-->
<!--};-->

<!--// 调用加载公告-->
<!--loadNotice();-->

<!--// 下载附件的方法-->
<!--const downloadAttachment = (attachmentUrl) => {-->
<!--  // 使用 <a> 标签进行文件下载-->
<!--  const link = document.createElement("a");-->
<!--  link.href = attachmentUrl;-->
<!--  link.download = attachmentUrl.split('/').pop();  // 获取文件名-->
<!--  link.click();-->
<!--};-->
<!--</script>-->

<!--<style scoped>-->
<!--.notice-content {-->
<!--  background-color: #f9f9f9; /* 背景色 */-->
<!--  border-radius: 10px;       /* 圆角 */-->
<!--  padding: 15px 20px;        /* 内边距 */-->
<!--  margin: 10px 0;            /* 外边距 */-->
<!--  font-size: 16px;           /* 字体大小 */-->
<!--  line-height: 1.6;          /* 行高 */-->
<!--  color: #333;               /* 文字颜色 */-->
<!--  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 轻微阴影 */-->
<!--  transition: transform 0.2s ease; /* 平滑过渡 */-->
<!--  width: 100%;               /* 宽度铺满父容器 */-->
<!--  box-sizing: border-box;    /* 包含内边距和边框 */-->
<!--}-->

<!--.notice-content:hover {-->
<!--  transform: scale(1.02); /* 鼠标悬停时轻微放大 */-->
<!--}-->
<!--</style>-->
<!--<template>-->
<!--  <div>-->
<!--    <div class="card" style="margin-bottom: 5px">-->
<!--      您好！{{ data.user?.name }}，欢迎使用本系统！-->
<!--    </div>-->
<!--    <div style="display: flex; flex-direction: column;">-->
<!--      <div class="card" style="flex: 100%">-->
<!--        <div style="font-weight: bold; font-size: 18px; padding: 10px 0 30px 10px">-->
<!--          系统公告-->
<!--        </div>-->
<!--        <el-timeline>-->
<!--          <el-timeline-item-->
<!--              v-for="(item, index) in data.noticeData"-->
<!--              :key="index"-->
<!--              :timestamp="item.time"-->
<!--          >-->
<!--            <div class="notice-content">-->
<!--              &lt;!&ndash; 公告文本内容 &ndash;&gt;-->
<!--              <div class="content-text">{{ item.content }}</div>-->
<!--              &lt;!&ndash; 公告时间和附件下载按钮放在新的一行 &ndash;&gt;-->
<!--              <div class="right-section">-->
<!--                <div class="timestamp">{{ item.time }}</div>-->
<!--                <div v-if="item.attachment">-->
<!--                  <el-button-->
<!--                      type="text"-->
<!--                      @click="downloadAttachment(item.attachment)"-->
<!--                      style="padding-left: 0;"-->
<!--                  >-->
<!--                    下载附件-->
<!--                  </el-button>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </el-timeline-item>-->
<!--        </el-timeline>-->
<!--      </div>-->
<!--    </div>-->
<!--  </div>-->
<!--</template>-->

<!--<script setup>-->
<!--import { reactive } from "vue";-->
<!--import request from "@/utils/request.js";-->
<!--import { ElMessage } from "element-plus";-->

<!--const data = reactive({-->
<!--  user: JSON.parse(localStorage.getItem('xm-user') || '{}'),-->
<!--  noticeData: []-->
<!--});-->

<!--// 加载公告数据-->
<!--const loadNotice = () => {-->
<!--  request.get('/notice/selectAll').then(res => {-->
<!--    if (res.code === '200') {-->
<!--      data.noticeData = res.data.map(item => ({-->
<!--        ...item,-->
<!--        attachment: item.attachment || null  // 确保有附件字段-->
<!--      }));-->
<!--    } else {-->
<!--      ElMessage.error(res.msg);-->
<!--    }-->
<!--  });-->
<!--};-->

<!--// 调用加载公告-->
<!--loadNotice();-->

<!--// 下载附件的方法-->
<!--const downloadAttachment = (attachmentUrl) => {-->
<!--  // 使用 <a> 标签进行文件下载-->
<!--  const link = document.createElement("a");-->
<!--  link.href = attachmentUrl;-->
<!--  link.download = attachmentUrl.split('/').pop();  // 获取文件名-->
<!--  link.click();-->
<!--};-->
<!--</script>-->

<!--<style scoped>-->
<!--.notice-content {-->
<!--  background-color: #f9f9f9; /* 背景色 */-->
<!--  border-radius: 10px;       /* 圆角 */-->
<!--  padding: 15px 20px;        /* 内边距 */-->
<!--  margin: 10px 0;            /* 外边距 */-->
<!--  font-size: 16px;           /* 字体大小 */-->
<!--  line-height: 1.6;          /* 行高 */-->
<!--  color: #333;               /* 文字颜色 */-->
<!--  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 轻微阴影 */-->
<!--  transition: transform 0.2s ease; /* 平滑过渡 */-->
<!--  width: 100%;               /* 宽度铺满父容器 */-->
<!--  box-sizing: border-box;    /* 包含内边距和边框 */-->
<!--}-->

<!--.content-text {-->
<!--  margin-bottom: 10px; /* 确保文本和其他内容有间距 */-->
<!--}-->

<!--.right-section {-->
<!--  display: flex;-->
<!--  flex-direction: column;-->
<!--  align-items: flex-end; /* 右对齐时间和下载按钮 */-->
<!--  margin-top: 10px;      /* 给右侧内容添加顶部间距 */-->
<!--}-->

<!--.timestamp {-->
<!--  font-size: 14px;-->
<!--  color: #888; /* 时间颜色 */-->
<!--  margin-bottom: 5px;-->
<!--}-->

<!--.notice-content:hover {-->
<!--  transform: scale(1.02); /* 鼠标悬停时轻微放大 */-->
<!--}-->
<!--</style>-->
<template>
  <div>
    <div class="card" style="margin-bottom: 5px">
      您好！{{ data.user?.name }}，欢迎使用本系统！
    </div>
    <div style="display: flex; flex-direction: column;">
      <div class="card" style="flex: 100%">
        <div style="font-weight: bold; font-size: 18px; padding: 10px 0 30px 10px">
          系统公告
        </div>
        <el-timeline>
          <el-timeline-item
              v-for="(item, index) in data.noticeData"
              :key="index"
          >
            <div class="notice-content">
              <!-- 公告文本内容 -->
              <div class="content-text">{{ item.content }}</div>
              <!-- 公告时间和附件下载按钮放在新的一行 -->
              <div class="right-section">
                <div class="timestamp">{{ item.time }}</div>
                <div v-if="item.attachment">
                  <el-button
                      type="text"
                      @click="downloadAttachment(item.attachment)"
                      style="padding-left: 0;"
                  >
                    下载附件
                  </el-button>
                </div>
              </div>
            </div>
            <!-- 使用插槽来定制时间的显示位置 -->
            <template v-slot:timestamp>
              <div class="timestamp">{{ item.time }}</div>
            </template>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive } from "vue";
import request from "@/utils/request.js";
import { ElMessage } from "element-plus";

const data = reactive({
  user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
  noticeData: []
});

// 加载公告数据
const loadNotice = () => {
  request.get('/notice/selectAll').then(res => {
    if (res.code === '200') {
      data.noticeData = res.data.map(item => ({
        ...item,
        attachment: item.attachment || null  // 确保有附件字段
      }));
    } else {
      ElMessage.error(res.msg);
    }
  });
};

// 调用加载公告
loadNotice();

// 下载附件的方法
const downloadAttachment = (attachmentUrl) => {
  // 使用 <a> 标签进行文件下载
  const link = document.createElement("a");
  link.href = attachmentUrl;
  link.download = attachmentUrl.split('/').pop();  // 获取文件名
  link.click();
};
</script>

<style scoped>
.notice-content {
  background-color: #f9f9f9; /* 背景色 */
  border-radius: 10px;       /* 圆角 */
  padding: 15px 20px;        /* 内边距 */
  margin: 10px 0;            /* 外边距 */
  font-size: 16px;           /* 字体大小 */
  line-height: 1.6;          /* 行高 */
  color: #333;               /* 文字颜色 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 轻微阴影 */
  transition: transform 0.2s ease; /* 平滑过渡 */
  width: 100%;               /* 宽度铺满父容器 */
  box-sizing: border-box;    /* 包含内边距和边框 */
}

.content-text {
  margin-bottom: 10px; /* 确保文本和其他内容有间距 */
}

.right-section {
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* 右对齐时间和下载按钮 */
  margin-top: 10px;      /* 给右侧内容添加顶部间距 */
}

.timestamp {
  font-size: 14px;
  color: #888; /* 时间颜色 */
  margin-bottom: 5px;
}

.notice-content:hover {
  transform: scale(1.02); /* 鼠标悬停时轻微放大 */
}
</style>
